<template>
  <div class="page" :style="{ padding:`${!isShowNewcomerDiscount && !isShowDiscountRestriction ? '12px':'0'}` }">
    <div class="flex" v-show="!isShowNewcomerDiscount && !isShowDiscountRestriction" >
      <div class="box box1" @click="handleChange(0)">
        <div class="title">折扣限购</div>
        <div class="tips">折扣限购，刺激消费</div>
      </div>
      <div class="box box2" @click="handleChange(1)">
        <div class="title">新人优惠</div>
        <div class="tips" style="color:#FF2440">新人礼品大放送</div>
      </div>
    </div>
    <!-- 折扣限购 -->
    <DiscountRestriction v-if="isShowDiscountRestriction"></DiscountRestriction>
    <!-- 新人优惠 -->
    <NewcomerDiscount v-if="isShowNewcomerDiscount" />
  </div>
</template>

<script setup>
import { useActivityData } from './Hooks/index'
import NewcomerDiscount from './Components/NewcomerDiscount/NewcomerDiscount.vue'
import DiscountRestriction from './Components/DiscountRestriction/DiscountRestrictionIndex.vue'
import { useMarketInfoStore } from '@/stores/marketing.js'
const useMarketStore = useMarketInfoStore()
const {
  isShowNewcomerDiscount,
  isShowDiscountRestriction
} = useActivityData()

const handleChange = (type)=>{
  if(type){
    isShowNewcomerDiscount.value = true
    useMarketStore.setMarketIndex({
      isShowNewcomerDiscount:true,
      isShowDiscountRestriction:false
    })
  }else{
    isShowDiscountRestriction.value = true
    useMarketStore.setMarketIndex({
      isShowDiscountRestriction:true,
      isShowNewcomerDiscount:false
    })
  }
}
</script>

<style lang="less" scoped>
.page{
  height: 100%;
  box-sizing: border-box;
}
.box{
  padding: 16px;
  width: 220px;
  height: 100px;
  box-sizing: border-box;
  cursor: pointer;

  .title{
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
    margin-bottom: 8px;
  }
  .tips{
    font-size: 12px;
    line-height: 12px;
    color: #3480ff;
  }
}
.box1{
  margin-right: 12px;
  background: url('@/assets/images/ShopActivity/discountRestriction.png') no-repeat;
  background-size: 100% 100%;
}
.box2{
  background: url('@/assets/images/ShopActivity/newcomerDiscount.png') no-repeat;
  background-size: 100% 100%;
}
</style>